<template>
  <!-- 这种选农业类型不用重复写样式 -->
  <div class="farmtypeview">
    <!-- 农业类型 -->
    <div v-if="basefarmtype.length > 0" class="select-farmtype">
      <div
        v-for="(item, index) in basefarmtype"
        :key="index"
        class="farmtypebutton"
        :class="
          item.plantVarietyNo === nowselectmessage.plantVarietyNo
            ? 'farmtypebutton-active'
            : ''
        "
        @click="slecttype(item)"
      >
        <!-- <div class="but-line"> -->
        {{ item.plantVarietyName }}
        <!-- </div> -->
      </div>
    </div>
    <!-- 框框 -->
    <!-- <div class="select-border">
      <slot name="farmtypemain" :typename="nowselectmessage"> </slot>
    </div> -->
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: "SelectFarmType",
  props: {
    plantTypeNo: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      basefarmtype: [
      ],
      nowselectmessage: { plantVarietyName: "大田种植", plantVarietyNo: '' }
    };
  },
  watch: {
    plantTypeNo: {
      handler(e) {
        this.getallfarmlist()
      }
    }
  },
  mounted() {
    this.getallfarmlist()
  },
  methods: {
    getallfarmlist() {
      if (this.plantTypeNo) {
        axios({
          method: "post",
          url: this.$webSerUrlPro + "category/plantVariety/queryByCondition",
          data: {
            plantTypeNo: this.plantTypeNo
          },
          params: {}
        }).then(response => {
          let farmmes = response.data.data
          if (farmmes && farmmes[0]) {
            this.basefarmtype = farmmes
            this.slecttype(farmmes[0])
          } else {
            this.basefarmtype = farmmes
            this.slecttype({})
          }
        })
      }
    },
    slecttype(e) {
      this.nowselectmessage = e;
      this.$emit("farmtypemessage", e);
    }
  }
};
</script>
<style lang="scss" scoped>
.farmtypeview {
  width: 100%;
  // height: 50px;
  // height: 100%;
  // background-color: antiquewhite;
  .select-farmtype {
    width: 97%;
    height: 40px;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    &:first-of-type {
      margin-left: 15px;
    }
    &:last-of-type {
      margin-right: 15px;
    }
    .farmtypebutton {
      width: 140px;
    height: 29px;
      background: #00525D;
      border-radius: 48px 48px 48px 48px;
      opacity: 1;
      border: 1px solid #005b5f;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      white-space: nowrap;
      margin-right: 12px;
      .but-line {
        width: 80px;
        height: 28px;
        font-size: 20px;
        font-family: PingFang SC-Regular, PingFang SC;
      white-space: nowrap;
      text-align: center;
        font-weight: 400;
        color: #ffffff;
        line-height: 28px;
      }

    }
    .farmtypebutton-active {
        background: #009fa5;
    }
    .farmtypebutton:hover{
    background: #009fa5;
    }
  }
  .select-border {
    margin-top: -30px;
    width: 100%;
    height: calc(100% - 20px);
    border: 2px dashed #01444e;
    padding: 40px 10px;
  }
}
</style>
